<% title t('categories.plural') %>
<% page_new new_category_path %>
<div class="subtitle">
  <%= t('categories.index.subtitle') %>
</div>

<div class="spacer"></div>

<% if @categories.length > 0 %>
  <%= render :partial => '/search/posts', locals: { data_type: 'category' } %>

  <%= render :partial => '/shared/stats', locals: { data_type: 'category' } %>

  <div id="pages">
    <div class="page">
    <%= render @categories %>
    </div>
  </div>

  <%= paginate @categories %>
<% else %>
  <%= raw t('categories.index.instructions', {
      icon: '<i class="fa fa-plus-circle"></i>'
    }) %>

  <div class="actions align_right">
    <%= button_to t('common.actions.add_all'), premade_categories_path %>
  </div>

  <div class="clear"></div>

  <div id="pages">
    <div class="page">
      <div class="category">
        <h1 class="category_name"><%= t('categories.index.premade1_name') %></h1>

        <%= strip_tags(t('categories.index.premade1_description')[0..80]) %>
        <% if t('categories.index.premade1_description').length >= 80 %>
          <%= t('ellipsis') %>
        <% end %>
      </div>

      <div class="category">
        <h1 class="category_name"><%= t('categories.index.premade2_name') %></h1>

        <%= strip_tags(t('categories.index.premade2_description')[0..80]) %>
        <% if t('categories.index.premade2_description').length >= 80 %>
          <%= t('ellipsis') %>
        <% end %>
      </div>

      <div class="category">
        <h1 class="category_name"><%= t('categories.index.premade3_name') %></h1>

        <%= strip_tags(t('categories.index.premade3_description')[0..80]) %>
        <% if t('categories.index.premade3_description').length >= 80 %>
          <%= t('ellipsis') %>
        <% end %>
      </div>

      <div class="category">
        <h1 class="category_name"><%= t('categories.index.premade4_name') %></h1>

        <%= strip_tags(t('categories.index.premade4_description')[0..80]) %>
        <% if t('categories.index.premade4_description').length >= 80 %>
          <%= t('ellipsis') %>
        <% end %>
      </div>
    </div>
  </div>
<% end %>
